<!-- 年规 - 供应链规划 - 供应商 - 新增/编辑 -->
<template>
  <view>
    <view class="px-3.75 pt-4 pb-25">
      <view v-for="(item, index) in formData" :key="index" class="card-grey">
        <view class="flex-shrink-0 w-190 c-#333">{{ item.label }}</view>
        <template v-if="item.type == 'select'">
          <u-input :modelValue="item.value" class="flex-1" :placeholder="item.placeholder || '请选择'" :customStyle="{ fontSize: '28rpx' }" disabled @click="onShowSelectClick(item)" />
            <u-icon v-if="isSocietyManager" class="flex-shrink-0" name="arrow-down" size="24" color="#666" @click="item.showSelect = true" />
          <u-select v-model="item.showSelect" :list="item.options" mode="single-column" confirmColor="#F4AF22" @confirm="onSelectConfirm(item, $event)" />
        </template>
        <template v-else>
          <u-input v-model="item.value" class="flex-1" :placeholder="`请输入${item.label}`" :disabled="!isSocietyManager" :type="item.inputType" :customStyle="{ fontSize: '28rpx' }" />
        </template>
      </view>
    </view>
    <view v-if="isSocietyManager" class="bottom-wrap-16 px-3.75 bg-white" @click="onSubmit">
      <view class="btn-primary">保存</view>
    </view>
  </view>
</template>
<script setup>
import { showToast } from '@/common/util/uni'
import { refreshPrePage } from '@/common/util/util'
import { postSupplierAdd, getSupplierDetail, postSupplierEdit } from '@/common/http/module/plan'

import { usePlanStore } from '@/store/plan'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const planStore = usePlanStore()

const state = reactive({
  id: ''
})
const formData = reactive([
  { label: '公司名称', value: '', prop: 'company_name' },
  { label: '公司地址', value: '', prop: 'company_address' },
  { label: '联系人', value: '', prop: 'contact' },
  { label: '电话', value: '', prop: 'mobile' },
  { label: '主营产品', value: '', prop: 'main_product' },
  { label: '供应规模', value: '', prop: 'supply_scale' },
  { label: '总成交金额', value: '', inputType: 'digit', prop: 'gross_transaction' },
  { 
    label: '供应商等级', 
    value: '', 
    type: 'select', 
    prop: 'supplier_level',
    showSelect: false, 
    placeholder: '请输入供应商等级ABCD由高到底',
    options: [{ label: 'A', value: 1 }, { label: 'B', value: 2 }, { label: 'C', value: 2 }, { label: 'D', value: 2 }] 
  },
  { 
    label: '供应模式', 
    value: '', 
    type: 'select', 
    prop: 'supplier_model',
    showSelect: false, 
    placeholder: '请选择供应模式',
    options: [{ label: '自有工厂', value: 1 }, { label: '贸易公司', value: 2 }, { label: '工贸结合', value: 2 }] 
  }
])

const isSocietyManager = computed(() => userStore.isSocietyManager || userStore.isSocietyCreator)

function loadData() {
  if (!state.id) return
  getSupplierDetail(state.id).then(res => {
    const data = res.data
    if (!data) return
    formData.forEach(item => {
      item.value = data[item.prop]
    })
  })
}

function onShowSelectClick(item) {
  if (!isSocietyManager.value) return
  item.showSelect = true
}

function onSelectConfirm(item, e) {
  item.value = e[0].label
}

function onSubmit() {
  const params = { 
    club_id: userStore.currentSocietyId,
    year: planStore.year,
  }
  formData.forEach(item => {
    params[item.prop] = item.value
  })
  if (state.id) {
    params.supplier_id = state.id
  }
  const func = state.id ? postSupplierEdit: postSupplierAdd
  func(params).then(() => {
    showToast('保存成功')
    refreshPrePage('refresh')
    setTimeout(() => uni.navigateBack(), 600)
  })
}

onLoad(options => {
  state.id = options.id

  loadData()
})
</script>

<style lang="scss" scoped>
.card-grey {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 0 20rpx;
  border-radius: 12rpx;
  background-color: #F6F6F6;
  font-size: 28rpx;
}
</style>
